<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .form {
            margin: 50px 100px;
        }

        .put {
            width: 800px;
            border: 1px solid gray;
            margin-top: 10px;
            overflow: hidden;
        }

        .form .put span {
            display: inline-block;
            width: 100px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-right: 1px solid gray;
            box-sizing: border-box;
        }

        .form .put input {
            border: none;
            width: 700px;
            height: 60px;
            padding-left: 15px;
            line-height: 60px;
            outline: none;
            box-sizing: border-box;
        }

        .form button {
            width: 100px;
            height: 50px;
            margin: 20px 0px;
        }


        table {
            border-collapse: collapse;
            margin: 100px 100px;
        }

        td {
            width: 150px;
            height: 50px;
            text-align: center;
            border: 1px solid #ccc;
        }

        .cover {
            position: fixed;
            display: none;
            padding: 20px;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 400px;
            transform: translate(-50%, -50%);
            background-color: #fff;
            box-shadow: 10px 10px 5px #ccc;
            ;
        }

        .cover p {
            margin-top: 10px;
        }

        .cover button {
            width: 80px;
            height: 40px;
            margin-top: 10px;
        }
    </style>
</head>

<body>

    <!-- 表单 -->
    <form>
        <div class="form">
            <div class="put">
                <span>姓名</span><input class="name" type="text" placeholder="请输入姓名">
            </div>
            <div class="put">
                <span>联系方式</span><input class="contact" type="text" placeholder="如果格式有错误输入框会变红提示">
            </div>
            <div class="put">
                <span>学历</span><input class="edu" type="text" placeholder="如果校验正确,绿色表示通过">
            </div>
            <div class="put">
                <span>年龄</span><input class="age" type="text" placeholder="Amount">
            </div>
            <div class="put">
                <span>期望薪资</span><input class="pay" type="text" placeholder="Amount">
            </div>

            <button id="save">提交</button>
            <button id="reset">重置</button>

        </div>
    </form>


    <!-- 表格 -->
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>联系方式</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <!-- 遮盖层 -->
    <div class="cover">
        <h2>修改信息</h2>
        <p>姓名: <input type="text" class="xingming"></p>
        <p>联系电话: <input type="text" class="telphone"></p>
        <p>学历: <input type="text" class="xueli"></p>
        <p>年龄: <input type="text" class="nianling"></p>
        <p>期望薪资: <input type="text" class="salary"></p>
        <button class="a6">关闭</button>
        <button class="a7">保存修改</button>
        <p style="color:red">鼠标按下触发拖动,抬起拖动消失</p>
    </div>


    <script src="jQuery.js"></script>
    <script>
        $('#save').click(function (e) {
            e.preventDefault()
            console.log('111')
            var obj = {
                name: $('.name').val(),
                contact: $('.contact').val(),
                edu: $('.edu').val(),
                age: $('.age').val(),
                pay: $('.pay').val(),
            }
            var list = JSON.parse(window.localStorage.getItem('list')) ? JSON.parse(window.localStorage.getItem('list')) : []
            list.push(obj)
            window.localStorage.setItem('list', JSON.stringify(list))

            getList()
        })
        // 手机号
        function checkTelephone() {
            // 1.获取手机号
            var telephone = $(".contact").val();
            // 2.定义正则
            console.log('触发了', telephone)
            var reg_tel = /^\d{11}$/;
            var flag = reg_tel.test(telephone)
            // 3.判断
            if (flag) {
                $(".contact").parents(".put").css({ "border-color": "green", 'color': '#000' });
            } else {
                $(".contact").parents(".put").css({ "border-color": " red", 'color': 'red' });
            }
            // 4.返回校验是否通过
            return flag;
        }

        //    姓名
        function checkName() {
            var name = $(".name").val();
            var reg_tel = /^(?![0-9])[_0-9a-z]{8,16}$/
            var flag = reg_tel.test(name)
            if (flag) {
                $(".name").parents(".put").css({ "border-color": "green", 'color': '#000' });
            } else {
                $(".name").parents(".put").css({ "border-color": " red", 'color': 'red' });
            }
            return flag;
        }
        //    年龄
        function checkAge() {
            var age = $(".age").val();
            var reg_tel = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
            var flag = reg_tel.test(age)
            if (flag) {
                $(".age").parents(".put").css({ "border-color": "green", 'color': '#000' });
            } else {
                $(".age").parents(".put").css({ "border-color": " red", 'color': 'red' });
            }
            return flag;
        }
        //    期望薪资
        function checkPay() {
            var pay = $(".pay").val();
            var reg_tel = /^[0-9]*$/
            var flag = reg_tel.test(pay)
            if (flag) {
                $(".pay").parents(".put").css({ "border-color": "green", 'color': '#000' });
            } else {
                $(".pay").parents(".put").css({ "border-color": " red", 'color': 'red' });
            }
            return flag;
        }

        // 校验变色
        $('.contact').blur(checkTelephone)
        $('.pay').blur(checkPay)
        $('.age').blur(checkAge)
        $('.name').blur(checkName)
        getList()
        function getList() {
            var list = JSON.parse(window.localStorage.getItem('list')) ? JSON.parse(window.localStorage.getItem('list')) : []
            $('tbody').html('')
            $.each(list, function (index, item) {
                console.log(item)
                $('tbody').append($(`<tr><td>${item.name}</td><td>${item.contact}</td><td>${item.edu}</td><td>${item.age}</td><td>${item.pay}</td>
                    <td>
                    <button onclick="editHandle(${index})">修改</button>
                    <button onclick="deleteHandle(${index})">删除</button>
                    </td></tr>`))
            })

        }
        var tableIndex = 0;
        function editHandle(val) {
            var list = JSON.parse(window.localStorage.getItem('list'))
            $.each(list, function (index, item) {
                if (val == index) {
                    tableIndex = val
                    $('.telphone').val(item.name);
                    $('.telphone').val(item.contact);
                    $('.xueli').val(item.edu);
                    $('.nianling').val(item.age);
                    $('.salary').val(item.pay);
                }
            })
            $('.cover').css('display', 'block')
        }
        function deleteHandle(val) {
            var list = JSON.parse(window.localStorage.getItem('list'))
            list.splice(val, 1)
            window.localStorage.setItem('list', JSON.stringify(list))
            getList()
        }

        // 关闭修改
        $('.a6').click(function () {
            $('.cover').css('display', 'none')
        })
        // 提交修改
        $('.a7').click(function (e) {
            console.log(tableIndex, 'index')
            var obj = {
                name: $('.telphone').val(),
                contact: $('.telphone').val(),
                edu: $('.xueli').val(),
                age: $('.nianling').val(),
                pay: $('.salary').val(),
            }
            var list = JSON.parse(window.localStorage.getItem('list'))
            list.splice(tableIndex, 1, obj)
            window.localStorage.setItem('list', JSON.stringify(list))
            $('.cover').css('display', 'none')
            getList()

        })
    </script>
</body>

</html>